		<template>
			<view class="mini-program-manage-page">
				<Tabbar >
					<TabbarItem @change="() => switcahTable('qq')">
						<view class="custom-tabber-item" :class="{'active-tabbar-item': showType === 'qq'}">QQ 小程序</view>
					</TabbarItem>
					<TabbarItem @change="() => switcahTable('wx')">
						<view class="custom-tabber-item" :class="{'active-tabbar-item': showType === 'wx'}">微信小程序</view>
					</TabbarItem>
				</Tabbar>
				
				<view class="list-box">
					<view class="wx-main" v-if="showType === 'wx'">
						<view class="list">
							<list v-if="wxList.length > 0">
								<view  v-for="(appItem, index) in wxList" :key="index" class="list-item">
									<view class="item-left">
										<image  :src="appItem.iconUrl" style="width: 50px;height: 50px"  />
										<view class="title">
											<view class="name"> {{ appItem.name }}</view>
											<view class="des"> {{ appItem.remark }}</view>
										</view>
									</view>
									<view  class="right-icon">
										<view class="nomal greed" :style="{color: queryStatus(appItem).color }"
											@click="() =>openShow(appItem)">{{ queryStatus(appItem).name }}</view>
											<image src="/static/icon/arrow-right.png" style="width: 16px; height: 16px;"></image>
									</view>
								</view>
							</list>
							<view v-else>
								<Empt description="暂无数据" />
							</view>
						</view>
					</view>
					<view class="qq-main" v-if="showType === 'qq'">
						<view class="list">
							<list v-if="qqList.length> 0">
								<view  v-for="(qq, i) in qqList" :key="i" class="list-item">
									<view class="item-left">
										<image :src="qq.iconUrl" style="width: 50px;height: 50px" />
										<view class="title">
											<view class="name"> {{ qq.name }}</view>
											<view class="des"> {{ qq.remark }}</view>
										</view>
									</view>
									<view class="right-icon">
										<view class="nomal greed" :style="{color: queryStatus(qq).color }"
											@click="() =>openShow(qq)">{{ queryStatus(qq).name }}</view>
										<image src="/static/icon/arrow-right.png" style="width: 16px; height: 16px;"></image>
									</view>
								</view>
							</list>
							<view v-else>
								<Empt description="暂无数据" />
							</view>
						</view>
					</view>
				</view>
				
			<!-- <van-tabs :active="active" @change="onChangeTab" title-active-color="#2BC888" color="#2BC888">
					<van-tab title="微信小程序">
						<view class="list">
							<van-cell-group>
								<van-cell :border="true" v-for="(appItem, index) in wxList" :key="index">
									<view slot="icon">
										<image width="50" height="50" :src="appItem.iconUrl" />
									</view>
									<view slot='title' class="title">
										<view class="name"> {{ appItem.name }}</view>
										<view class="des"> {{ appItem.remark }}</view>
									</view>
									<view slot="right-icon" class="right-icon">
										<view class="nomal greed" :style="{color: queryStatus(appItem).color }"
											@click="() =>openShow(appItem)">{{ queryStatus(appItem).name }}</view>
									
										<van-icon name="arrow" />
									</view>
								</van-cell>
							</van-cell-group>
						</view>
					</van-tab>
					<van-tab title="QQ 小程序">
						<view class="list">
							<van-cell-group>
								<van-cell :border="true" v-for="(qq, i) in qqList" :key="i">
									<view slot="icon">
										<image width="50" height="50" :src="qq.iconUrl" />
									</view>
									<view slot='title' class="title">
										<view class="name"> {{ qq.name }}</view>
										<view class="des"> {{ qq.remark }}</view>
									</view>
									<view slot="right-icon" class="right-icon">
										<view class="nomal greed" :style="{color: queryStatus(qq).color }"
											@click="() =>openShow(qq)">{{ queryStatus(qq).name }}</view>
										<van-icon name="arrow" />
									</view>
								</van-cell>
							</van-cell-group>
						</view>
					</van-tab>
				</van-tabs> -->

			<uni-popup
					ref="newAddTimeRef"
					type="bottom"
					background-color="#fff"
					class="customVanPopupComponet"
					>
					<view class="popup-main">
						<view class="header">
							<view class="cancal" @click="onClose">取消</view>
							<view class="save" @click="onSave">保存</view>
						</view>
						<view class="popup-content">
							<uni-data-checkbox class="radio-list" v-model="radio" :localdata="types" @change="onChangeType" selectedColor="#2bc888" selectedTextColor="#2bc888"></uni-data-checkbox>
							<!-- <uni-radio-group :value="radio" @change="onChangeRadio" class="radio-group">
								<radio name="1" icon-size="24upx" checked-color="#2BC888">禁用</radio>
								<radio name="2" icon-size="24upx" checked-color="#2BC888">不限制</radio>
							</uni-radio-group> -->
						</view>
					</view>
				</uni-popup>

			</view>
		</template>

		<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue'
	import { homeServer } from '@/common/index'
	import { urlHelp } from '@/utils/index'
	import Tabbar from "@/components/tabbar/index"
	import TabbarItem from "@/components/tabbar/tabbar-item.vue"
	import Empt from "@/components/Empt/index.vue"
	
	import { useStudentListStore } from "@/stores/useStudentList.js"
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	const newAddTimeRef = ref()
	type ShowTypeProps = 'qq' | 'wx'
	const showType = ref<ShowTypeProps>('qq'); //qq ||wx
	const switcahTable = (type: ShowTypeProps) => {
		showType.value = type
	}
	
	const types = ref([
		{
			value: '1',
			text:'禁用'
		},
		{
			value: '2',
			text:'不限制'
		}
	])
	const onChangeType = ({detail}) => {
		radio.value = detail.value
	}

	const wxList = ref([]);
	// 获取微信列表
	const smallProgramList = async () => {
		const studentId = curStd.value?.id;
		if (studentId) {
			try {
				const { status, data } = await homeServer.smallProgramList({ studentId });
				if (status === '200') {
					wxList.value = data?.map(item => urlHelp.imgAddPrefix(item, 'iconUrl'));
				}
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}
		} else {
			console.log('没找到学生id')
		}
	}
	const qqList = ref([]);
	// 获取微信列表
	const smallProgramListQQ = async () => {
		const studentId = curStd.value?.id;
		if (studentId) {
			try {
				const { status, data } = await homeServer.smallProgramListQQ({ studentId });
				if (status === '200') {
					qqList.value = data?.map(item => urlHelp.imgAddPrefix(item, 'iconUrl'));
				}
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}
		} else {
			console.log('没找到学生id')
		}
	}


	onMounted(async () => {
		await smallProgramList();
		await smallProgramListQQ();
	})



	const keyword = ref('');
	const active = ref(0);
	const onSearch = (r) => { console.log(r) }
	const onCancel = (r) => { console.log(r) }

	const queryStatus = (app) => {
		console.log("app", app)
		const { useStatus } = app;
		const status = [
			{
				value: 1,
				name: '禁用',
				color: "#900"
			},
			{
				value: 2,
				name: '不限制',
				color: "#2BC888"
			}
		];
		const item = status.find(a => a.value === Number(useStatus));
		return {
			...item
		}
	}


	const show = ref(false);
	const currentSelect = ref({});
	const openShow = (appItem) => {
		// show.value = true
		newAddTimeRef.value.open()
		radio.value = `${appItem.useStatus}`
		currentSelect.value = appItem
	}
	const onClose = () => {
		// show.value = false;
		newAddTimeRef.value.close()
	}

	// 修改小程序，或者微信的状态


	const onSave = async () => {
		const { smallProgramId, id } = currentSelect.value;
		try { //  useStatus 1:禁用 2: 不限时
			const { status, data } = await homeServer.updateSmallProgramStatus({ id, useStatus: radio.value, smallProgramId });
			if (status === '200') {
				uni.showToast({
					title: "修改成功",
					icon: "success",
					async success() {
						await smallProgramList();
						await smallProgramListQQ();
					}
				})
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
		onClose()
	}
	const radio = ref("1");
	const onChangeRadio = ({ detail }) => {
		radio.value = detail;
	};



	const onChangeTab = (e) => {
		console.log(e);
	}
		</script>


		<style lang="scss">
			page {
				background-color: #f5f9fa;
			}

			.mini-program-manage-page {
				.list {
					background-color: #fff;
					margin-top: 40upx;

					.title {
						margin-left: 30upx;

						.name {
							font-weight: bold;
							font-size: 28upx;
							color: #000;
						}

						.des {
							font-weight: 400;
							font-size: 28upx;
							color: #a5a5a5;
						}

					}

					.right-icon {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.nomal {}

						.red {
							color: #a32b34;
						}

						.greed {
							color: #2bc888;
						}
					}
				}
			}
		</style>


		<style lang="scss">
			.popup-main {
				padding: 0 30upx;
				min-height: 200upx;
				.header {
					display: flex;
					justify-content: space-between;
					padding: 20upx;
					.cancal {
						text-align: left;
					}

					.save {
						text-align: right;
					}
				}

				.popup-content {
					display: flex;
					margin-top: 40upx;
					justify-content: center;
					padding-bottom: 20px;
					// .radio-list{
					// 	display: flex;
					// 	justify-content: space-around;
					// }
				}
			}

			.customVanPopupComponet {
				.van-popup {
					min-height: 250upx;
				}
			}
			
			
			.custom-tabber-item{
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 20upx;
				font-size: 30upx;
			}
			.active-tabbar-item{
				border-bottom: 5upx solid #2BC888;
				color: #2BC888;
			}
			
			.list-item{
				display: flex;
				align-items: center;
				margin-bottom: 30upx;
				justify-content: space-between;
				.item-left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}
		</style>